<template>
  <div class="topContent">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
    <span class="leftBtn" @click="goBack">
      返回
    </span>
    <span class="contentBtn">
      我的年度账单
    </span>
    <span class="rightBtn" @click="bigFull">
      {{ fullValue }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()

const fullValue = ref<string>('扩展')

const goBack = () => {
  router.back()
}

const bigFull = () => {
  // dom属性 判断是否全屏 布尔值
  const full = document.fullscreenElement
  if (full) {
    document.exitFullscreen() // 退出
    fullValue.value = '扩展'
  } else {
    document.documentElement.requestFullscreen() // 全屏
    fullValue.value = '收缩'
  }
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.topContent {
  width: 100%;
  height: 90px;
  display: flex;
  position: relative;
  .left {
    flex: 1;
    height: 85%;
    background: #2c1413;
    opacity: 0.4;
    border-radius: 0px 70px;
    border: 5px solid rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.5);
  }
  .content {
    flex: 2;
    background: #2c1413;
    opacity: 0.4;
    border-radius: 0 0 70px 70px;
    border: 5px solid rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.5);
    text-align: center;
  }
  .right {
    flex: 1;
    background: #2c1413;
    height: 85%;
    opacity: 0.4;
    border-radius: 70px 0;
    border: 5px solid rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.5);
  }
  .leftBtn {
      color: #fbd5b8;
      width: 100px;
      height: 55px;
      line-height: 70px;
      text-align: center;
      font-size: 26px;
      font-weight: 500;
      float: right;
      cursor: pointer;
      margin-right: 15px;
      position: absolute;
      left: 18%;
      top: 0;
    }
  .contentBtn {
      color: #fbefb8;
      width: 500px;
      height: 80px;
      line-height: 80px;
      letter-spacing: 4px;
      text-align: center;
      font-size: 44px;
      font-weight: 700;
      position: absolute;
      left: 38%;
      top: 0;
    }
    .rightBtn {
      color: #fbefb8;
      width: 100px;
      height: 55px;
      line-height: 70px;
      text-align: center;
      font-size: 26px;
      font-weight: 500;
      float: left;
      cursor: pointer;
      margin-left: 15px;
      position: absolute;
      right: 18%;
      top: 0;
    }
}
</style>